<!--
 * @Author: doing
 * @Date: 2023-08-10 10:21:33
 * @LastEditors: git config user.name && git config user.email
 * @LastEditTime: 2023-09-16 22:29:36
 * @FilePath: \水果新鲜识别项目\web-admin\src\pages\role\index.vue
 * @Description: 
 * 角色管理页面
 * Copyright (c) 2023 by 1540265624@qq.com, All Rights Reserved. 
-->
<template>
    <el-card>
        <div class="card-header">
            <el-button @click="InitRole">
                <el-icon style="vertical-align: middle;">
                    <RefreshLeft />
                </el-icon>
                <span style="vertical-align: middle;">重置</span>
            </el-button>
            <el-button type="primary" @click="handleAdd">
                <el-icon style="vertical-align: middle;">
                    <CirclePlus />
                </el-icon>
                <span style="vertical-align: middle;">新增</span>
            </el-button>
        </div>
        <div class="formDrawer">
            <!-- 分配角色组件 -->
            <el-table ref="assignTableRef" :data="assignTable" v-loading="loading" border :table-layout="tableLayout" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }">
                <el-table-column property="id" label="id" width="120" />
                <el-table-column property="roleName" label="角色名称" />
                <el-table-column property="roleKey" label="角色标识" />
                <el-table-column label="操作" width="auto" min-width="280px">
                    <template v-slot="scope">
                        <el-row :gutter="20" class="flex justify-center">
                            <el-tooltip content="编辑" placement="top" class="btn">
                                <el-button type="success" @click="handleEdit(scope.row)" icon="Edit" />
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top" class="btn">
                                <el-button type="danger" @click="handleDelete(scope.row.id)" icon="Delete" />
                            </el-tooltip>
                            <el-tooltip content="分配菜单" placement="top" class="btn">
                                <el-button type="primary" @click="handleAssign(scope.row.id)" icon="Operation" />
                            </el-tooltip>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" background layout="prev, pager, next" :total="1000"
                v-model:current-page="page.pi" :page-count="page.ps" @current-change="handleCurrentChange" />
            <edit-component ref="editRef" destroyOnClose :data="editData" @clean="resetDialog" />
            <add-component ref="addRef" destroyOnClose :data="addData" @clean="resetDialog" />
            <assign-menu ref="assignRef" destroyOnClose :data="assignData" @clean="resetDialog"  />
        </div>
    </el-card>
</template>
<script setup>
import { ref, onMounted, computed, reactive, toRef, nextTick } from "vue"
import EditComponent from '~/pages/role/components/EditComponent.vue'
import AddComponent from '~/pages/role/components/AddComponent.vue'
import AssignMenu from '~/pages/role/components/AssignMenu.vue'
import {
    toast,
    showModal
} from '~/composables/util.js'

import User from '~/api/user.js'
import Role from '~/api/role.js'

const editRef = ref(null)
const addRef = ref(null)
const assignRef = ref(null)
const editData = reactive({})
const addData = reactive({})
const assignData = reactive({})

const loading = ref(false)
const assignTableRef = ref(null)
const assignTable = ref([])
const tableLayout = ref('auto');
const page = reactive({
    pi: 1, //页码
    ps: 5  //页数(可以自己设定)
})

onMounted(() => {
    InitRole()
})

//初始化数据函数
const InitRole = async function () {

    loading.value = true

    const data = { ...page }
    console.log('传递参数为')
    console.log(data)

    loading.value = true

    //查看所有的角色信息
    await Role.getRole(data).then(res => {
        console.log(res)
        assignTable.value = res.data.data.records
    }).catch(err => {
        console.log(err)
    })
    console.log(assignTable.value)

    loading.value = false
}

//跳转页面
const handleCurrentChange = function () {
    InitRole()
}
//重置表格
const resetDialog = () => {
    InitRole()
}

//新增角色
const handleAdd = function () {
    // 处理新增用户的方法
    addData.roleName = ''
    addData.roleKey = ''
    addData.status = true

    console.log(addData)
    // console.log(InitData)
    addRef.value.open()
}

//编辑角色
const handleEdit = function (row) {
    // 处理编辑用户的方法
    editData.value = { ...row }
    editRef.value.open()
}

//删除角色
const handleDelete = async function (id) {
    showModal('是否要删除该数据?').then(async () => {
        toast('正在删除中...', 'info', false, 3000)
        await Role.deleteRole(id).then(res => {
            console.log(res)
            if (res.data.data !== null) {
                toast('删除成功', 'success', false, 3000)
            } else {
                toast(res.data.msg, 'warning', false, 3000)
            }
            InitRole()
        }).catch(err => {
            throw err
        })
    }).catch(err=>{
        console.log(err)
    })
}

//分配菜单
const handleAssign = function(id) {
    assignData.id = id 
    assignRef.value.open()
}



</script>
<style>
.formDrawer {
    width: 100%;
    height: 100%;
    position: relative;
    @apply flex flex-col;
}

.formDrawer .body {
    flex: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto;
}

.formDrawer .actions {
    height: 50px;
}

.roleList-scrollbar {
    max-width: 800px;
    max-height: 160px;
}
</style>